<template>
	<div id="content" style="height: 100%;">
		<div class="commonWidth" style="width: 100%">
			<el-row style="margin-bottom: 10px">
				<el-button size="small" style="float: right;" @click="downLoadExcle">导出EXCEL</el-button>
			</el-row>
			<div style="height: 100%;width: 100%">
				<div
					style="display: flex;background: #fff;padding: 10px;border-radius: 8px;margin-top: 10px;color: #999;">
					<div style="padding: 10px;cursor: pointer;" :class="[params.selectType == 5?'selectedClass':'']"
						@click="selectType(5)">
						月度申报报告表</div>
					<div style="padding: 10px;cursor: pointer;" :class="[params.selectType == 6?'selectedClass':'']"
						@click="selectType(6)">
						季度申报报告表</div>
					<div style="padding: 10px;cursor: pointer;" :class="[params.selectType == 7?'selectedClass':'']"
						@click="selectType(7)">
						年度申报报告表</div>
				</div>
				<div style="display: flex;background: #fff;padding: 10px;border-radius: 8px;margin-top: 10px;color: #999;"
					v-if="params.selectType == 5">
					<el-date-picker class="input-width" v-model="params.startTime" type="month"
						value-format="yyyy-MM-dd" format="yyyy-MM" size="small" @change="search" placeholder="选择月份">
					</el-date-picker>
				</div>
				<div style="display: flex;background: #fff;padding: 10px;border-radius: 8px;margin-top: 10px;color: #999;"
					v-if="params.selectType == 6">
					<el-date-picker class="input-width" v-model="params.year" type="year" value-format="yyyy"
						format="yyyy" size="small" @change="search" placeholder="选择年度" style="margin-right: 5px;">
					</el-date-picker>
					<el-select size="small" class="input-width" v-model="params.quarter" placeholder="请选择季度"
						@change="search">
						<el-option v-for="(item,index) in quarterList" :label="item.name" :value="item.code" :key="index">
						</el-option>
					</el-select>
				</div>
				<div style="display: flex;background: #fff;padding: 10px;border-radius: 8px;margin-top: 10px;color: #999;"
					v-if="params.selectType == 7">
					<el-date-picker class="input-width" v-model="params.startTime" type="year" value-format="yyyy-MM-dd"
						format="yyyy" size="small" @change="search" placeholder="选择年度">
					</el-date-picker>
				</div>
				<div style="background: #fff;padding: 10px;border-radius: 8px;margin-top: 10px;width: 100%">
					<div v-if="params.selectType == 5" style="width: 100%">
						<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak>
							<el-table-column type="index" label="序号" width="50">
							</el-table-column>
							<el-table-column label="产生情况" width="150">
								<el-table-column label="废物名称">
									<el-table-column prop="wasteName" label="行业俗称/单位内部名称">
									</el-table-column>
									<el-table-column prop="wasteName" label="国家危险废物名录名称">
									</el-table-column>
								</el-table-column>
								<el-table-column prop="wasteCode" label="危险废物代码" width="150">
								</el-table-column>
								<el-table-column prop="wasteType" label="危险废物类别" width="150">
								</el-table-column>
								<el-table-column prop="harmfulIngredients" label="有害成分名称" width="150">
								</el-table-column>
								<el-table-column prop="shape" label="形态" width="150">
								</el-table-column>
								<el-table-column prop="dangerCharacterStr" label="危险特性" width="150">
								</el-table-column>
								<el-table-column prop="produceAmount" label="产生量" width="150">
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
							</el-table-column>

							<el-table-column prop="" label="自行利用/处置情况" width="150">
								<el-table-column prop="" label="利用/处置方式" width="150">
									<div slot-scope="scope">
										<div v-for="(item,index) in scope.row.selfDisposeList"
											style="width: 30px;line-height: 30px;white-space: nowrap;text-overflow:ellipsis;overflow: hidden">
											{{item.disposeMethod}}
										</div>
									</div>
								</el-table-column>
								<el-table-column prop="" label="利用/处置量" width="150">
									<div slot-scope="scope">
										<div v-for="(item,index) in scope.row.selfDisposeList"
											style="width: 30px;line-height: 30px;white-space: nowrap;text-overflow:ellipsis;overflow: hidden">
											>
											{{item.amount}}
										</div>
									</div>
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
							</el-table-column>

							<el-table-column prop="" label="委托外单位利用/处置情况" width="150">
								<el-table-column prop="" label="省（区、市）" width="150">
								</el-table-column>
								<el-table-column prop="" label="单位名称" width="150">
								</el-table-column>
								<el-table-column prop="" label="危险废物经营许可证编号/利用处置环节豁免管理单位编号/出口核准通知单编号" width="150">
								</el-table-column>
								<el-table-column prop="" label="利用/处置方式" width="150">
								</el-table-column>
								<el-table-column prop="" label="利用/处置量" width="150">
								</el-table-column>
								<el-table-column prop="" label="计量单位" width="150">
								</el-table-column>

							</el-table-column>

							<el-table-column prop="" label="贮存情况" width="150">
								<el-table-column prop="lastStorageAmount" label="上月底剩余贮存量" width="150">
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
								<el-table-column prop="storageAmount" label="本月底剩余贮存量" width="150">
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
							</el-table-column>

						</el-table>
					</div>


					<div v-if="params.selectType == 6" style="width: 100%">
						<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak>
							<el-table-column type="index" label="序号" width="50">
							</el-table-column>
							<el-table-column label="产生情况" width="150">
								<el-table-column label="废物名称">
									<el-table-column prop="wasteName" label="行业俗称/单位内部名称">
									</el-table-column>
									<el-table-column prop="wasteName" label="国家危险废物名录名称">
									</el-table-column>
								</el-table-column>
								<el-table-column prop="wasteCode" label="危险废物代码" width="150">
								</el-table-column>
								<el-table-column prop="wasteType" label="危险废物类别" width="150">
								</el-table-column>
								<el-table-column prop="harmfulIngredients" label="有害成分名称" width="150">
								</el-table-column>
								<el-table-column prop="shape" label="形态" width="150">
								</el-table-column>
								<el-table-column prop="dangerCharacterStr" label="危险特性" width="150">
								</el-table-column>
								<el-table-column prop="produceAmount" label="产生量" width="150">
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
							</el-table-column>

							<el-table-column prop="" label="自行利用/处置情况" width="150">
								<el-table-column prop="" label="利用/处置方式" width="150">
									<div slot-scope="scope">
										<div v-for="(item,index) in scope.row.selfDisposeList"
											style="width: 30px;line-height: 30px;white-space: nowrap;text-overflow:ellipsis;overflow: hidden">
											{{item.disposeMethod}}
										</div>
									</div>
								</el-table-column>
								<el-table-column prop="" label="利用/处置量" width="150">
									<div slot-scope="scope">
										<div v-for="(item,index) in scope.row.selfDisposeList"
											style="width: 30px;line-height: 30px;white-space: nowrap;text-overflow:ellipsis;overflow: hidden">
											>
											{{item.amount}}
										</div>
									</div>
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
							</el-table-column>

							<el-table-column prop="" label="委托外单位利用/处置情况" width="150">
								<el-table-column prop="" label="省（区、市）" width="150">
								</el-table-column>
								<el-table-column prop="" label="单位名称" width="150">
								</el-table-column>
								<el-table-column prop="" label="危险废物经营许可证编号/利用处置环节豁免管理单位编号/出口核准通知单编号" width="150">
								</el-table-column>
								<el-table-column prop="" label="利用/处置方式" width="150">
								</el-table-column>
								<el-table-column prop="" label="利用/处置量" width="150">
								</el-table-column>
								<el-table-column prop="" label="计量单位" width="150">
								</el-table-column>

							</el-table-column>

							<el-table-column prop="" label="贮存情况" width="150">
								<el-table-column prop="lastStorageAmount" label="上季度底剩余贮存量" width="150">
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
								<el-table-column prop="storageAmount" label="本季度底剩余贮存量" width="150">
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
							</el-table-column>

						</el-table>
					</div>


					<div v-if="params.selectType == 7" style="width: 100%">
						<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak>
							<el-table-column type="index" label="序号" width="50">
							</el-table-column>
							<el-table-column label="产生情况" width="150">
								<el-table-column label="废物名称">
									<el-table-column prop="wasteName" label="行业俗称/单位内部名称">
									</el-table-column>
									<el-table-column prop="wasteName" label="国家危险废物名录名称">
									</el-table-column>
								</el-table-column>
								<el-table-column prop="wasteCode" label="危险废物代码" width="150">
								</el-table-column>
								<el-table-column prop="wasteType" label="危险废物类别" width="150">
								</el-table-column>
								<el-table-column prop="harmfulIngredients" label="有害成分名称" width="150">
								</el-table-column>
								<el-table-column prop="shape" label="形态" width="150">
								</el-table-column>
								<el-table-column prop="dangerCharacterStr" label="危险特性" width="150">
								</el-table-column>
								<el-table-column prop="produceAmount" label="产生量" width="150">
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
							</el-table-column>

							<el-table-column prop="" label="自行利用/处置情况" width="150">
								<el-table-column prop="" label="利用/处置方式" width="150">
									<div slot-scope="scope">
										<div v-for="(item,index) in scope.row.selfDisposeList"
											style="width: 30px;line-height: 30px;white-space: nowrap;text-overflow:ellipsis;overflow: hidden">
											{{item.disposeMethod}}
										</div>
									</div>
								</el-table-column>
								<el-table-column prop="" label="利用/处置量" width="150">
									<div slot-scope="scope">
										<div v-for="(item,index) in scope.row.selfDisposeList"
											style="width: 30px;line-height: 30px;white-space: nowrap;text-overflow:ellipsis;overflow: hidden">
											{{item.amount}}
										</div>
									</div>
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
							</el-table-column>

							<el-table-column prop="" label="委托外单位利用/处置情况" width="150">
								<el-table-column prop="" label="省（区、市）" width="150">
									<div slot-scope="scope">
										<div v-for="(item,index) in scope.row.outDisposeList"
											style="width: 30px;line-height: 30px;white-space: nowrap;text-overflow:ellipsis;overflow: hidden">
										</div>
									</div>
								</el-table-column>
								<el-table-column prop="" label="单位名称" width="150">
									<div slot-scope="scope">
										<div v-for="(item,index) in scope.row.outDisposeList"
											style="width: 30px;line-height: 30px;white-space: nowrap;text-overflow:ellipsis;overflow: hidden">
											{{item.entName}}
										</div>
									</div>
								</el-table-column>
								<el-table-column prop="" label="危险废物经营许可证编号/利用处置环节豁免管理单位编号/出口核准通知单编号" width="150">

								</el-table-column>
								<el-table-column prop="" label="利用/处置方式" width="150">
									<div slot-scope="scope">
										<div v-for="(item,index) in scope.row.outDisposeList"
											style="width: 30px;line-height: 30px;white-space: nowrap;text-overflow:ellipsis;overflow: hidden">
											{{item.disposeMethod}}
										</div>
									</div>
								</el-table-column>
								<el-table-column prop="" label="利用/处置量" width="150">
									<div slot-scope="scope">
										<div v-for="(item,index) in scope.row.outDisposeList"
											style="width: 30px;line-height: 30px;white-space: nowrap;text-overflow:ellipsis;overflow: hidden">
											{{item.amount}}
										</div>
									</div>
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>

							</el-table-column>

							<el-table-column prop="" label="贮存情况" width="150">
								<el-table-column prop="lastStorageAmount" label="上年底剩余贮存量" width="150">
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
								<el-table-column prop="storageAmount" label="本年底剩余贮存量" width="150">
								</el-table-column>
								<el-table-column prop="unitValue" label="计量单位" width="150">
								</el-table-column>
							</el-table-column>

						</el-table>
					</div>

					<div v-show="tableData.list&&tableData.list.length>0 && params.selectType!=5&& params.selectType!=6&& params.selectType!=7"
						align="right" style="margin-top: 10px">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]"
							:page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper"
							:total="tableData.total">
						</el-pagination>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	let that
	export default {
		data() {
			return {
				listLoading: true,
				entWasteList: [],
				params: {
					startTime: '',
					endTime: '',
					entWasteId: '',
					ticketId: this.$store.state.token,
					selectType: 5,
					year: ''
				},
				dateValues: [],
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				sourceList: [],
				quarterList: [{
						code: 1,
						name: '第一季度'
					},
					{
						code: 2,
						name: '第二季度'
					},
					{
						code: 3,
						name: '第三季度'
					},
					{
						code: 4,
						name: '第四季度'
					},
				]
			}
		},
		created: function() {
			const _this = this;
			that = this;

			_this.getAllWasteByWasteTags();
			_this.initParams();
			_this.getTableData();
			_this.getWasteSourceList();
		},
		methods: {

			getFirst() {
				var date = new Date();
				date.setDate(1);
				var cTime = new Date(new Date(date).toLocaleDateString()).getTime();
				//将时间戳转换成时间格式
				var date1 = new Date(cTime);
				var year = date1.getFullYear();
				var month = date1.getMonth() + 1;
				var day = date1.getDate();
				month = month < 10 ? "0" + month : month;
				day = day < 10 ? "0" + day : day;
				var ddate = year + '-' + month + '-' + day;
				return ddate;
			},

			getLastDay() {
				var date = new Date();
				date.setDate(1);
				var cTime = new Date(new Date(date).toLocaleDateString()).getTime();
				//将时间戳转换成时间格式
				var date1 = new Date(cTime);
				var year = date1.getFullYear();
				var month = date1.getMonth() + 1;
				var day = new Date(year, month, 0).getDate();
				month = month < 10 ? "0" + month : month;
				day = day < 10 ? "0" + day : day;
				var ddate = year + '-' + month + '-' + day;
				return ddate;
			},

			//选择台账类型
			selectType(type) {
				that.params.selectType = -1

				setTimeout(function() {
					that.tableData.pageIndex = 1
					that.params.selectType = type
					that.getTableData()
				}, 500)

			},

			search() {
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			//下载表格
			downLoadExcle() {
				let apiName
				let appPath = "https://www.weifeibangbang.com/"
				//let appPath = "http://localhost:8080/"

				if (that.params.selectType == 0) {
					apiName = "/standBook /createProduceExcel"
				} else if (that.params.selectType == 1) {
					apiName = "/standBook/createInStorageExcel"
				} else if (that.params.selectType == 2) {
					apiName = "/standBook/createOutStorageExcel"
				} else if (that.params.selectType == 3) {
					apiName = "/standBook/createSelfDisposeStorageExcel"
				} else if (that.params.selectType == 4) {
					apiName = "/standBook/createDisposeStorageExcel"
				} else if (that.params.selectType == 5) {
					apiName = "/standBook/createMonthExcel?ticketId=" + that.params.ticketId + "&date=" + that.params
						.startTime
				} else if (that.params.selectType == 6) {
					apiName = "/standBook/createQuarterStandingBook?ticketId=" + that.params.ticketId + "&year=" + that
						.params
						.year +
						"&quarter=" + that.params.quarter
				} else if (that.params.selectType == 7) {
					apiName = "/standBook/createYearStandingBook?ticketId=" + that.params.ticketId + "&date=" + that.params
						.startTime
				}
				/*apiName = apiName + '?ticketId=<%=ticketId%>' + "&entWasteId=" + that.params.entWasteId
				if (that.params.startTime) apiName = apiName + '&startTime=' + that.params.startTime
				if (that.params.endTime) apiName = apiName + '&endTime=' + that.params.endTime
				apiName =apiName+"&date="+that.params.startTime*/
				window.open(appPath + apiName)
			},

			getTableData() {
				let apiName
				if (that.params.selectType === 5 || that.params.selectType === 6 || that.params.selectType === 7) {
					if (that.params.selectType == 5) {
						apiName = "/standBook/getMonthSummaryStandingBook"
						that.params.date = that.params.startTime
					}
					if (that.params.selectType == 6) {
						apiName = "/standBook/getQuarterSummaryStandingBook"
						that.params.date = that.params.year
						that.params.startTime = that.params.year + "-01-01 00:00:00"
						that.params.endTime = that.params.year + "-12-31 23:59:59"
					}
					if (that.params.selectType == 7) {
						apiName = "/standBook/getYearSummaryStandingBook"
						that.params.date = that.params.startTime
					}

					that.ajax({
						url: apiName + '?ticketId=' + that.params.ticketId + '&pageIndex=' + that.tableData
							.pageIndex +
							'&pageSize=' + that.tableData.pageSize,
						data: JSON.stringify(that.params),
						contentType: 'application/json',
						dataType: 'json',
						method: 'POST',
						success: function(result) {
							if (result.data) {
								that.tableData.list = result.data
							}
						},
					})
				} else {
					if (that.params.selectType == 0) {
						apiName = "/standBook/pageDocumentProduceStandBook"
					} else if (that.params.selectType == 1) {
						apiName = "/standBook/pageDocumentInStorageStandBook"
					} else if (that.params.selectType == 2) {
						apiName = "/standBook/pageDocumentOutStorageStandBook"
					} else if (that.params.selectType == 3) {
						apiName = "/standBook/pageDocumentSelfDisposeStandBook"
					} else if (that.params.selectType == 4) {
						apiName = "/standBook/pageDocumentDisposeStandBook"
					}
					that.ajax({
						url: apiName + '?ticketId=' + that.params.ticketId + '&pageIndex=' + that.tableData
							.pageIndex +
							'&pageSize=' +
							that
							.tableData.pageSize,
						data: JSON.stringify(that.params),
						contentType: 'application/json',
						dataType: 'json',
						method: 'POST',
						success: function(result) {
							if (result.data) {
								that.tableData.list = result.data.records;
								that.tableData.total = result.data.total;
							}
						},
					})
				}

			},

			initParams: function(entWasteId) {
				const _this = this;
				let now = new Date();
				_this.params.startTime = _this.getFirst()
				_this.params.endTime = _this.getLastDay()
				_this.params.year = String(now.getFullYear());
				_this.params.quarter = 1;
				_this.params.entWasteId = entWasteId
			},
			getAllWasteByWasteTags: function() {
				const _this = this;
				that.ajax({
					url: '/wasteTag/getAllWasteByWasteTags?ticketId=' + that.params.ticketId,
					data: {},
					success: function(data) {
						if (data.status == 1) {
							_this.entWasteList = data.data;
							if (_this.entWasteList.length > 0) {
								_this.initParams(_this.entWasteList[0].entWasteId);
							}
							_this.getTableData();
						}
					}
				});
			},
			getWasteSourceList: function() {
				const _this = this;
				that.ajax({
					url: '/standBook/getWasteSourceList?ticketId=' + that.params.ticketId,
					data: {},
					success: function(data) {
						if (data.status == 1) {
							_this.sourceList = data.data;
						}
					}
				});
			},
		}

	}
</script>

<style>
	.input-width {
		width: 200px !important;
	}

	.selectedClass {
		color: #3a3ef4;
		font-weight: bold;
	}

	.downLoadText {
		color: #958fe9;
		border: 1px solid#958fe9;
		border-radius: 40px;
		padding: 6px 30px;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}
</style>